import { createRouter, createWebHashHistory } from 'vue-router'

/**
 * 路由懒加载：
 * 1. 没有懒加载：所有页面代码都会被下载
 * 2. 懒加载：访问小兔鲜儿首页，下载页面js+css等代码并执行
 */
// 1. 导入页面
// 父页面
import Layout from '@/views/layout'
// 子页面：首页
// import Home from '@/views/home'
const Home = () => import('@/views/home')
// 分类页
// import Cate from '@/views/cate'
const Cate = () => import('@/views/cate')
// 商品详情页
const Good = () => import('@/views/good')

// 2. 配置路由
const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      // 默认跟随父页面一块渲染显示：1. path地址设置为空 2. path地址和父一样
      // 首页
      {
        path: '/',
        component: Home
      },
      // 分类
      {
        path: '/cate/:id',
        component: Cate
      },
      // 商品详情
      {
        path: '/good/:id',
        component: Good
      }
    ]
  }
]
// vue2 => new Router()
// vue3 => createRouter()
/**
 * 路由模式修改：
 * vue2 => mode:'hash | history'
 * vue3 => history: createWebHashHistory() | createWebHistory()
 */
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router
